<template>
    <el-drawer v-model="props.signalVisible" size="790" :before-close="handleClose" class="signal-drawer">
        <template #header>
            <div class="signal-header">
                <h4>信号</h4>
                <div class="signal-header-btn">

                    <el-button class="mt20" type="primary" @click="addDomain">新增信号</el-button>
                    <div class="signal-num">共有<span class="red-text">{{ dynamicValidateForm.domains.length }}</span>个信号
                    </div>
                </div>
            </div>
        </template>
        <template #default>
            <el-alert title="备注：第一、信号名称要判重。第二、信号编码前半部分用分类名称、设备名称、厂家、设备型号的id组成，后半部分用序号001开头往后排" type="error" />
            <el-form ref="formRef" :inline="true" :model="dynamicValidateForm" label-width="80px">
                <div class="signal-card mb10" v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key">
                    <el-form-item label="信号名称" :prop="'domains.' + index + '.name'" :rules="[{
                        required: true,
                        message: '请输入信号名称',
                        trigger: 'blur',
                    }]">
                        <el-input v-model="domain.name" placeholder="请输入信号名称" />
                    </el-form-item>
                    <el-form-item label="信号编码" :prop="'domains.' + index + '.code'" :rules="[{
                        required: true,
                        message: '请输入信号编码',
                        trigger: 'blur',
                    },
                    {
                        validator: validateCode,
                        trigger: 'blur',
                    }]">
                        <el-input v-model="domain.code" placeholder="请输入信号编码" />
                    </el-form-item>
                    <!-- <el-form-item label="信号类型" :prop="'domains.' + index + '.category'" :rules="[{
                        required: true,
                        message: '请输入信号类型',
                        trigger: 'change',
                    }]">
                        <el-select style="width: 140px;" v-model="domain.category">
                            <el-option label="遥测" value="1"></el-option>
                            <el-option label="遥信" value="2"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="danger" @click.prevent="removeDomain(domain)">删除</el-button>
                    </el-form-item>
                </div>
            </el-form>


        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="submitForm(formRef)">保 存</el-button>
                <el-button @click="handleClose"> 取 消</el-button>
                <!-- <el-button @click="resetForm(formRef)"></el-button> -->
            </div>
        </template>

    </el-drawer>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus'
// 定义接收的属性类型
const props = defineProps({
    signalVisible: {
        type: Boolean,
        required: true
    }
});
// 定义自定义事件类型
const emits = defineEmits(['closeSignal']);
const handleClose = () => {
    emits('closeSignal', false)
    console.log('emitsemits')
}
const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{ domains: DomainItem[] }>({
    domains: [
        {
            key: 1,
            name: '',
            code: '',
            // category: ''
        },
    ],
    // email: '',
})

interface DomainItem {
    key: number;
    name: string;
    code: string;
    // category: string;
}
function validateCode(rule: any, value: string, callback: any) {
    if (!/^\d+$/.test(value)) {
        callback(new Error('信号编码必须为数字'));
    } else {
        callback();
    }
}
const removeDomain = (item: DomainItem) => {
    const index = dynamicValidateForm.domains.indexOf(item)
    if (index !== -1) {
        dynamicValidateForm.domains.splice(index, 1)
    }
}

const addDomain = () => {
    dynamicValidateForm.domains.push({
        key: Date.now(),
        name: '',
        code: '',
        // category: ''
    })
}

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>


<style lang="scss" scoped>
.signal-header-btn {
    display: flex;
    align-items: center;
}

.signal-num {
    font-size: 16px;
    margin-top: 15px;
    margin-left: 10px;
}

.red-text {
    color: #ff0000;
}
</style>